<template>
  <v-container fluid class="login-container">
    <v-row class="fill-height" no-gutters>
      <v-col cols="12" md="6" class="d-flex align-center justify-center">
        <div class="text-center px-10">
          <v-img src="@/assets/logo.png" max-width="150" class="mb-6" />
          <h1 class="text-white font-weight-bold mb-4">欢迎使用后台管理系统</h1>
        </div>
      </v-col>
      <v-spacer />
      <v-col cols="12" md="6" class="d-flex justify-center align-center">
        <v-card class="pa-6 login-card" max-width="500" width="100%" elevation="12">
          <v-card-title class="text-h5">后台管理登录</v-card-title>

          <v-form ref="formRef" v-model="valid">
            <v-text-field
              label="用户名"
              v-model="username"
              prepend-icon="mdi-account"
              :rules="[requiredRule]"
            />

            <v-text-field
              label="密码"
              v-model="password"
              type="password"
              prepend-icon="mdi-lock"
              :rules="[requiredRule]"
            />

            <v-card-actions class="d-flex justify-space-between">
              <v-spacer />
              <v-btn color="primary" @click="login" :loading="loading"> 登录 </v-btn>
            </v-card-actions>
          </v-form>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import service from '@/utils/request.js'
import { useUserStore } from '@/stores/userStore.js'
import { useMessageStore } from '@/stores/MessageStore.js'
import { useLogSocketStore } from '@/stores/LogSocketStore.js'

const username = ref('')
const password = ref('')
const formRef = ref(null)
const valid = ref(false)
const loading = ref(false)

const userStore = useUserStore()
const messageStore = useMessageStore()
const router = useRouter()

const requiredRule = (v) => !!v || '该字段不能为空'

const login = async () => {
  const { valid } = await formRef.value?.validate()
  if (!valid) {
    messageStore.trigger('请填写用户名与密码', 'error')
    return
  }

  loading.value = true
  try {
    const response = await service.post('/auth/login', {
      username: username.value,
      password: password.value,
    })

    if (response.code === 1) {
      const { username, email, avatar, token, roles } = response.data
      userStore.setUser({ username, email, avatar, roles })
      localStorage.setItem('token', token)

      messageStore.trigger('登录成功', 'success')
      if (roles.includes('ROLE_ADMIN')) {
        useLogSocketStore().connect()
      }

      router.push('/index')
    }
  } catch (err) {
    console.error(err)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.fill-height {
  height: 100vh;
}

.login-container {
  background: linear-gradient(135deg, #2196f3, #e3f2fd);
  transition: background 0.8s ease-in-out;
  height: 100%;
}

.login-card {
  animation: fadeIn 0.6s ease-in-out;
  background-color: #ffffff;
  border-radius: 12px;
}

@keyframes fadeIn {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
